<template>
    <div class="continer">
        <!-- <div class="treebox">
            <el-tree
                :data="treeData"
                :props="defaultProps"
                node-key="id"
                :default-expanded-keys="treeOpen"
                @node-click="handleNodeClick"
                class="t-over"
            ></el-tree>
        </div> -->
        <div class="contbox">
            <div class="topbox">
                <el-form :inline="true" class>
                    <el-form-item class="query-form-item">
                        <el-input v-model="username" placeholder="账号"></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-input v-model="name" placeholder="姓名"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-search" @click="onSerach">查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh" @click="onReset">刷新</el-button>
                            <el-button type="primary" icon="el-icon-plus" @click.native="btnAdd">新增</el-button>
                        </el-button-group>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                :data="listData"
                ref="tableSelects"
                row-key="number"
                style="width: 100%"
                stripe
                border
                @select="handleSelection"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="56" align="center" v-if="isSelect"></el-table-column>
                <el-table-column label="登录名" prop="username"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="手机" prop="tel"></el-table-column>
                <el-table-column label="操作" v-if="!isSelect">
                    <template slot-scope="scope">
                        <!-- <el-button
                            type="text"
                            size="mini"
                            @click="handleDetail(scope.$index, scope.row)"
                        >查看</el-button> -->
                        <el-button
                            type="text"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                layout="prev, pager, next, jumper"
                :total="listLen"
                :page-size="limit"
                @current-change="toPage"
                :current-page.sync="currentPage"
                class="txt_r mt_20"
            ></el-pagination>
        </div>

        <iform
            :formData="formData"
            :show="showForm"
            :formType="formType"
            @closeForm="closeForm"
            @addSubmit="addSubmit"
            @editSubmit="editSubmit"
        />
    </div>
</template>

<script>
import * as apis from "../../api/system/adminRequest";
import * as institutiionApi from "../../api/system/institutiion";
import iform from "./authAdminForm";

export default {
    name: "authAdmin",
    data() {
        return {
            // 查询
            username: "",
            name: "",
            mechanismId: null,
            // 列表数据，多选
            listData: [],
            tableSelects: [],
            // 表单数据
            formData: {},
            showForm: false,
            formType: 1,
            // 分页
            listLen: 0,
            limit: 10,
            currentPage: 1,
            // 显示添加表单
            showSubAdd: false,
            // 树数据/配置
            treeData: [],
            treeOpen: [],
            defaultProps: {
                children: "children",
                label: "name"
            }
        };
    },
    props: ["isSelect", "show"],
    methods: {
        // 获取列表
        getList(page = 1) {
            this.currentPage = page;
            apis.getList({
                username: this.username,
                name: this.name,
                mechanismId: this.mechanismId,
                page: page,
                limit: this.limit
            })
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message,
                            duration: 1800
                        });
                    } else {
                        this.listLen = data.data.total;
                        this.listData = data.data.list;
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "获取数据失败!",
                        duration: 1800
                    });
                });
        },
        // 点击树
        handleNodeClick(node) {
            this.username = "";
            this.name = "";
            this.mechanismId = node.id;
            this.getList();
        },
        // 点击新建用户
        btnAdd() {
            this.formData = { roles: [] };
            this.showForm = true;
            this.formType = 1;
        },
        // 提交新建用户
        addSubmit(data) {
            var o = JSON.parse(JSON.stringify(data));
            apis.add(o)
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message,
                            duration: 1800
                        });
                        return;
                    }
                    this.$message({
                        type: "success",
                        message: "添加成功",
                        duration: 1800
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "添加失败!",
                        duration: 1800
                    });
                });
        },
        // 详情
        handleDetail(index,row){
            this.formData = row;
            this.showForm = true;
            this.formType = 1;
        },
        // 点击编辑
        handleEdit(index, row) {
            this.formData = row;
            this.showForm = true;
            this.formType = 2;
        },
        // 提交编辑
        editSubmit(data) {
            var o = JSON.parse(JSON.stringify(data));
            apis.edit(o)
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message,
                            duration: 1800
                        });
                        return;
                    }
                    this.$alert("修改的用户重新登录后生效", "提示", {
                        confirmButtonText: "确定"
                    }).then(() => {
                        this.$message({
                            type: "success",
                            message: "修改成功",
                            duration: 1800
                        });
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "修改失败!",
                        duration: 1800
                    });
                });
        },
        // 点击删除
        handleDelete(index, row) {
            this.$confirm("确定删除该用户吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    apis.del({ id: row.id })
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message,
                                    duration: 1800
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                                duration: 1800
                            });
                            this.getList();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "删除失败!",
                                duration: 1800
                            });
                        });
                })
                .catch(() => {});
        },
        // 表格选择
        handleSelection(val) {
            this.$refs.tableSelects.clearSelection();
            if (!val.length) {
                return;
            }
            this.$refs.tableSelects.toggleRowSelection(
                val[val.length - 1],
                true
            );
        },
        handleSelectionChange(val) {
            this.$emit("fillUser", val.length === 1 ? val[0] : false);
        },
        // 查询
        onSerach() {
            this.mechanismId = null;
            this.getList();
        },
        // 清除查询表单
        onReset() {
            this.username = "";
            this.name = "";
            this.mechanismId = null;
            this.getList();
        },
        // 机构列表
        getJgList() {
            institutiionApi
                .getList()
                .then(data => {
                    if (data.code) {
                        return;
                    }
                    this.treeData = data.data.list;
                })
                .catch(() => {});
            institutiionApi
                .getTree()
                .then(data => {
                    if (data.code) {
                        return;
                    }
                    let arr = data.data.list;
                    this.treeOpen = [];
                    for (let i in arr) {
                        this.treeOpen.push(arr[i].id);
                    }
                })
                .catch(() => {});
        },
        // 跳转页数
        toPage(val) {
            this.getList(val);
        },
        // 清空表单  name: 表单rel名称，close：关闭方法/显示属性
        closeForm() {
            this.showForm = false;
        }
    },
    created() {
        this.getList();
        // this.getJgList();
    },
    watch: {
        show() {
            this.$refs.tableSelects.clearSelection();
        }
    },
    components: {
        iform
    }
};
</script>

<style scoped>
.continer {
    display: flex;
}
.t-over {
    width: 250px;
    height: 100%;
    overflow: auto;
}
.treebox {
    border: 1px solid #ebeef5;
}
.contbox {
    margin-left: 20px;
    flex: auto;
}
.txt_r {
    text-align: right;
}
.mt_20 {
    margin-top: 20px;
}
.topbox {
    margin-bottom: 20px;
}
</style>
